<template>
  <div>
    <Table :list="list">
      <template v-slot:title="scope">
        <h2>
          {{ scope.title }}
        </h2>
      </template>
      <template v-slot:Id="scope">
        <h3>
          {{ scope.Id }}
        </h3>
      </template>
      <template v-slot:name="scope">
        <h3>
          {{ scope.names }}
        </h3>
      </template>
      <template v-slot:price="scope">
        <h4>
          {{ scope.price }}
        </h4>
      </template>
      <template v-slot:time="scope">
        <h3>
          {{ scope.time }}
        </h3>
      </template>
      <template v-slot:msg="scope">
        <p>
          {{ scope.msg }}
        </p>
      </template>
    </Table>
  </div>
</template>

<script>
import Table from './components/Table'
export default {
  components: { Table },
  data () {
    return {
      list: [
        { id: 100, name: '外套', price: 199, time: new Date('2010-08-12') },
        { id: 101, name: '裤子', price: 34, time: new Date('2013-09-01') },
        { id: 102, name: '鞋', price: 25.4, time: new Date('2018-11-22') },
        { id: 103, name: '头发', price: 19900, time: new Date('2020-12-12') }
      ]
    }
  },

  created () {},

  methods: {}
}
</script>

<style scoped lang="less"></style>
